<template>
    <div class="Parentbox">
        <div class="bovin">
            <div style=" display: flex; justify-content: center; width: 1500px; height: 100px;background-color: #ffffff">
                <div style="width: 1381px; height: 170px;background-color: #e4e6e8; ">
                    <div style="height: 1px;"></div>
                    <el-card class="box-card">
                        <div style="display: flex; justify-content: space-between ;">
                            <div>
                                <el-row type="flex">
                                    <el-form label-width="70px" label-position="left ">
                                        <el-form-item label="商品编码">
                                            <el-input style="width: 380px; margin-right: 10px;"></el-input>
                                        </el-form-item>
                                        <el-form-item label="商品名称">
                                            <el-input style="width: 380px;"></el-input>
                                        </el-form-item>
                                    </el-form>
                                </el-row>
                                <el-row type="flex" justify="end">
                                    <el-button size="mini" type="primary">搜索</el-button>
                                    <el-button size="mini">重置</el-button>
                                </el-row>
                            </div>
                            <div style="margin-top: 10px;">
                                <el-form label-width="40px" label-position="left ">
                                    <el-form-item label="状态">
                                        <el-select placeholder="请选择活动区域">
                                            <el-option label="待上架"></el-option>
                                            <el-option label="待上架"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                                <div style="margin-top: 18px;">
                                    <el-button size="small" type="primary">新增</el-button>
                                    <el-button size="small">申请上架</el-button>
                                    <el-button size="small">下架</el-button>
                                    <!-- 字体图标 -->
                                    <el-button type="text">
                                        <i class="el-icon-delete"></i>
                                    </el-button>
                                    <el-button type="text">
                                        <i class="el-icon-delete"></i>
                                    </el-button>
                                    <el-button type="text">
                                        <i class="el-icon-delete"></i>
                                    </el-button>

                                </div>
                            </div>
                        </div>
                    </el-card>
                    <div>
                        <el-card>
                            <el-table :data="tableData">
                                <el-table-column type="selection">
                                </el-table-column>
                                <el-table-column label="商品" width="800px">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                        <div style="margin-left: 10px">{{ scope.row.name }}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="创建时间">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="状态">
                                    <template slot-scope="scope">
                                        <i style="color: #85d537;" class="iconfont  icon-point-copy-big"></i>
                                        <span>已上架</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <el-button type="text">
                                        <i class="el-icon-delete"></i>
                                    </el-button>
                                    <el-button type="text">
                                        <i class="el-icon-delete"></i>
                                    </el-button>
                                    <el-button type="text">
                                        <i class="el-icon-delete"></i>
                                    </el-button>
                                </el-table-column>
                            </el-table>
                            <!-- 分页 -->
                            <div style="display: flex; justify-content:end ">
                                <div>
                                    <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="10">
                                    </el-pagination>
                                </div>
                            </div>
                        </el-card>
                    </div>

                </div>
            </div>
            <!-- 商品编码 -->
            <!-- 商品 -->
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
        }
    }
}
</script>

<style lang="less" scoped>
.bovin {
    height: 889px;
    background-color: #f7f8fa;
}

/deep/.el-form {
    display: flex;
}
</style>